<template>
  <div class="carBox">
    <el-steps
      :active="1"
      finish-status="success"
      :align-center="true"
      class="steps"
    >
      <el-step title="1.我的购物车" />
      <el-step title="2.填写核对订单信息" />
      <el-step title="3.成功提交订单" />
    </el-steps>
    <div class="addressInfo">
      <div class="initAddress">
        <div>
          <img
            src="../../assets/img/local.png"
            alt=""
          >
          <span>收货人</span>
        </div>
        <div class="btns">
          <div
            class="addAd"
            @click="showModals('add')"
          >
            新增地址
          </div>
        </div>
      </div>
      <div class="ads">
        <div class="addinfos">
          <div
            v-for="item in adsList"
            :key="item.id"
            class="leftAdd"
          >
            <div
              class="leftAd"
              :class="{ isSelected: item.bDefault == true }"
              @click="setInitAddress(item)"
            >
              <span :class="{ isSelected: item.bDefault == true }">{{
                item.cReceiver
              }}</span>
              <span>{{ item.cReceiver }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                item.cProvince
              }}{{ item.cCity }}{{ item.cArea }}{{ item.cAddress }}</span>
              <span>{{ item.cMobile }}</span>
            </div>
            <div
              v-if="item.bDefault !== true"
              class="rightAd"
            >
              <span @click="setInitAddress(item)">设为默认地址</span>
              <span @click="editAddress(item)">编辑</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="detail.oCustomSetting.isMerchantDistribution==0"
      class="pick-box"
    >
      <div class="title">
        配送选择
      </div>
      <div class="new_big_box">
        <el-form
          ref="form"
          :model="form"
          label-width="8rem"
        >
          <!-- <el-form-item label=""> -->
          <span
            v-for="(ite) in detail.EMSList"
            :key="ite.id"
            :class="{ active: detail.cDeliverType === ite.id }"
            @click="checkoDeliver(detail.EMSList, detail, ite)"
          >
            {{ ite.name }}
          </span>
          <!-- </el-form-item> -->

          <el-form-item
            v-if="detail.cDeliverType !== 'EMS'"
            style="margin-top: 2rem;"
            label="门店"
            :rules="{
              required: true, message: '请选择门店', trigger: 'blur'
            }"
          >
            <el-select
              v-model="detail.storeNumber"
              placeholder="请选择"
              style="width: 100%;"
              @change="StoreIdData($event, detail.StoreList, detail)"
            >
              <el-option
                v-for="stor in detail.StoreList"
                :key="stor.code"
                :label="`${stor.name} - ${stor.address}`"
                :value="stor.name"
              />
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="detail.cDeliverType !== 'EMS'&&detail.oCustomSetting.iAppointLimitDays"
            label="提货时间"
          >
            <!-- {{ o.shopCustomSetting.iAppointLimitDays }} -->
            <el-date-picker
              v-model="detail.dAppointDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
              :editable="false"
              :picker-options="detail.pickerOptions"
            />
          </el-form-item>

          <el-form-item
            v-if="detail.cDeliverType !== 'EMS'&&detail.oCustomSetting.appointTime"
            label="时间段"
          >
            <el-select
              v-model="detail.timeNumber"
              placeholder="请选择"
              style="width: 100%;"
              @change="TimeNumberData($event, detail.oCustomSetting.appointTime.split(';'), detail)"
            >
              <el-option
                v-for="apptime in detail.oCustomSetting.appointTime.split(';')"
                :key="apptime"
                :label="apptime"
                :value="apptime"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="tableTitle">
      <div style="width: 16rem">
        商品图片
      </div>
      <div style="width: 24rem">
        商品信息
      </div>
      <div style="width: 10rem">
        规格
      </div>
      <div style="width: 14rem">
        数量
      </div>
      <div style="width: 10rem">
        单价
      </div>
      <div style="width: 12rem">
        操作
      </div>
    </div>

    <div class="carList">
      <div
        v-for="(o,index) in detail.orderDetailData"
        :key="index"
        class="list"
      >
        <div class="top-box">
          <div class="shop_title">
            {{ o.shopCustomSetting.cShopTag||"平台自营" }}
          </div>
          <div class="shop_time">
            配送时间：工作日、双休日与节假日均可送货
          </div>
        </div>
        <div
          v-for="item2 in o.orderDetail"
          :key="item2.iSKUId"
        >
          <div class="list_item">
            <div
              class="goodImg"
              @click="GoToShow(item2)"
            >
              <img
                :src="item2.DefaultImage"
                alt=""
              >
            </div>
            <div
              class="titles"
              style="text-align: center"
            >
              {{ item2.cProductName }}
            </div>
            <div
              class="skus"
              style="text-align: center"
            >
              {{ item2.cSpecDescription }}
            </div>
            <div
              class="nums"
              style="text-align: center"
            >
              {{ item2.iQuantity }}
            </div>
            <div
              class="price"
              style="text-align: center"
            >
              <span>¥</span>
              {{ item2.fSalePrice }}
            </div>
            <div class="ops">
              <div @click="collect(item2)">
                移入收藏夹
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="detail.oCustomSetting.isMerchantDistribution==1"
          class="new_big_box"
        >
          <el-form
            ref="form"
            :model="form"
            label-width="8rem"
          >
            <el-form-item label="配送方式">
              <span
                v-for="ite in o.EMSList"
                :key="ite.id"
                :class="{ active: o.cDeliverType === ite.id }"
                @click="checkoDeliver(o.EMSList, o, ite)"
              >
                {{ ite.name }}
              </span>
            </el-form-item>

            <el-form-item label="订单备注">
              <el-input
                v-model="o.cClientMemo"
                type="textarea"
                placeholder="订单备注"
                rows="4"
              />
            </el-form-item>

            <el-form-item
              v-if="o.cDeliverType !== 'EMS'"
              label="门店"
              :rules="{
                required: true, message: '请选择门店', trigger: 'blur'
              }"
            >
              <el-select
                v-model="o.storeNumber"
                placeholder="请选择"
                style="width: 100%;"
                @change="StoreIdData($event, o.StoreList, o)"
              >
                <el-option
                  v-for="stor in o.StoreList"
                  :key="stor.code"
                  :label="`${stor.name} - ${stor.address}`"
                  :value="stor.name"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              v-if="o.cDeliverType !== 'EMS'&&o.shopCustomSetting.iAppointLimitDays"
              label="提货时间"
            >
              <!-- {{ o.shopCustomSetting.iAppointLimitDays }} -->
              <el-date-picker
                v-model="o.dAppointDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
                :editable="false"
                :picker-options="o.pickerOptions"
              />
            </el-form-item>

            <el-form-item
              v-if="o.cDeliverType !== 'EMS'&&o.shopCustomSetting.appointTime"
              label="时间段"
            >
              <el-select
                v-model="o.timeNumber"
                placeholder="请选择"
                style="width: 100%;"
                @change="TimeNumberData($event, o.shopCustomSetting.appointTime.split(';'), o)"
              >
                <el-option
                  v-for="apptime in o.shopCustomSetting.appointTime.split(';')"
                  :key="apptime"
                  :label="apptime"
                  :value="apptime"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div
          v-if="detail.oCustomSetting.isMerchantDistribution==0"
          class="new_big_box"
        >
          <el-form
            ref="form"
            :model="form"
            label-width="8rem"
          >
            <el-form-item label="订单备注">
              <el-input
                v-model="o.cClientMemo"
                type="textarea"
                placeholder="订单备注"
                rows="4"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="opGroups">
      <div class="topers">
        <div class="tab-box">
          <el-tabs
            v-model="IntegralSwitch"
            @tab-click="handleClick"
          >
            <el-tab-pane
              label="优惠券"
              name="coupons"
            >
              <div class="coupons_tab_box">
                <div
                  class="item"
                  :class="CouponsIndex === 1?'coupons_active':''"
                  @click="CouponsTabClick(1)"
                >
                  可使用优惠券/折扣券({{ availableCount }})
                </div>
                <div
                  class="item"
                  :class="CouponsIndex === 2?'coupons_active':''"
                  @click="CouponsTabClick(2)"
                >
                  不可使用优惠券/折扣券({{ unavailableCount }})
                </div>
              </div>
              <!-- tab内容 -->
              <div
                v-if="CouponsIndex === 1"
                class="tab_content_box"
              >
                <el-row
                  :gutter="20"
                  class="item_box"
                >
                  <el-col
                    v-for="(item,index) in availableMemberCoupon"
                    :key="index"
                    :span="12"
                  >
                    <div class="checkbox_box">
                      <span class="item">满{{ item.startAmount }}减{{ item.reduceAmount }}</span>
                      <span class="item">{{ item.iTypeName }}</span>
                      <span class="item">有效期至：{{ item.expireEndDate | formatDate(2) }}</span>
                      <span
                        v-if="!item.isSelected"
                        class="item nuset"
                        @click="userCoupon(item)"
                      >
                        使用
                      </span>
                      <span
                        v-if="item.isSelected"
                        class="item nuset"
                        @click="userCoupons(item)"
                      >
                        取消
                      </span>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div
                v-else
                class="tab_content_box"
              >
                <el-row
                  :gutter="20"
                  class="item_box"
                >
                  <el-col
                    v-for="(item,index) in unavailableMemberCoupon"
                    :key="index"
                    :span="12"
                  >
                    <div class="checkbox_box">
                      <span class="item">满{{ item.startAmount }}减{{ item.reduceAmount }}</span>
                      <span class="item">{{ item.iTypeName }}</span>
                      <span class="item">有效期至：{{ item.expireEndDate | formatDate(2) }}</span>
                      <span
                        v-if="!item.isSelected"
                        class="item nuset"
                      >
                        已过期
                      </span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="积分"
              name="integral"
            >
              <!-- <div class="tip">
                积分满1000即可使用:每次使用积分为n*1000
              </div>
              <div class="tip">
                账户共{{ info.iPoints }}个积分 本次使用
                <el-select
                  v-model="value"
                  placeholder="请选择"
                  size="mini"
                  @change="DeductionChange"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
                抵扣￥{{ deduction }}
              </div> -->
              <!-- <div class="tip">
                <div class="buttontox">
                  <el-button
                    type="text"
                    class="tipbutton"
                  >
                    [了解什么是积分]
                  </el-button>
                </div>
              </div> -->
            </el-tab-pane>
            <el-tab-pane
              label="整单优惠活动"
              name="order"
            >
              <!-- 整单优惠活动 -->
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="pict_box">
          <div class="leftops" />
          <div class="rightops">
            <div class="prices">
              <div>商品金额（不含运费）:</div>
              <div>¥{{ detail.fTotalMoney }}</div>
            </div>
            <div class="prices">
              <div>整单优惠金额:</div>
              <!-- {{ newOrder.fTotalMoney }} -->
              <div>¥ 0</div>
            </div>
            <div class="prices">
              <div>运费:</div>
              <div>¥{{ detail.iPostage+yun }}</div>
            </div>
            <div class="prices">
              <div>优惠券/折扣券抵扣金额:</div>
              <div>-¥{{ coupon.maxReduceAmount }}</div>
            </div>
            <div
              v-if="detail.fDepositMoney"
              class="moeny"
            >
              <div>预付定金:</div>
              <div>¥{{ detail.fDepositMoney }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="btnsGroup">
        <div class="allprice">
          <span>应付总额：</span>
          <span class="pr">￥{{ (detail.fTotalMoney*1000+yun*1000-coupon.maxReduceAmount*1000)/1000 }}</span>
        </div>
        <div class="payBox">
          <div
            class="payfors"
            @click="goPayFor"
          >
            提交订单
          </div>
        </div>
      </div>
    </div>

    <Like style="width: 87rem;margin:2.25rem auto;" />
    <DeleteModal
      ref="delModal"
      @result="result"
    />
    <addressModal
      ref="addrssModals"
      :edititem="edit_item"
      @saveAddress="saveAddress"
    />
    <!-- <delModal ref="delModals" @result="confirmResult" /> -->
  </div>
</template>

<script>
	import Like from "../../components/common/like.vue";
	import DeleteModal from "../../components/common/deleteModal.vue";
	import radio from "../../assets/img/radio.png";
	import radio_on from "../../assets/img/radio_on.png";
	import addressModal from "../../components/common/addressModal.vue";
	// import delModal from '../../components/common/deleteModal.vue'
	export default {
		components: {
			Like,
			DeleteModal,
			addressModal,
		},
		data() {
			return {
				radio: radio,
				radio_on: radio_on,
				orderList: [],
				odeliveryType: [],
				detail: {
					fTotalMoney: 0,
					iPostage: 0,
					oCustomSetting: {
						isMerchantDistribution: 0,
						appointTime: ''
					}
				},
				addressData: {},
				disa: false,
				adsList: [],
				yun: 0,
				coupon: {
					maxReduceAmount: 0
				},
				cClientMemo: "限50个字",
				cOrderPayType: '',
				array: [],
				cDeliverName: "请选择",
				orderOtherData: {},
				cPayType: '',
				doubleClick: true,
				dlyFeeRuleId: [],
				postList: [],
				YUNPIGEC: 0, // 根据运费模板算出运费
				FzBigList: [],
				STOresList: [], // 门店列表
				oMemeber: {}, // 买家信息
				appointTime: [],
				time: '',
				IntegralSwitch: 'coupons', // 积分切换
				CouponsIndex: 1, // 优惠券中切换可用选项
				availableCount: 0, //可用优惠券数量
				availableMemberCoupon: [], //可用优惠券列表
				unavailableCount: 0, // 不可用优惠券数量
				unavailableMemberCoupon: [], // 不可用优惠券列表
				newOrder: {
					fTotalMoney: "",
				},
				edit_item: {},
				form: {},
				dAppointDate: this.getDates('start'), // 提货时间/预约日期
				// UndAppointDate: this.getDates('end', 1), // 提货时间/预约日期
				DayData: 3,
				pickerOptions: {}
			}
		},
		computed: {
			// 计算运费总和
			sumAmount() {
				return this.FzBigList.map(row => row.freightPrice).reduce((acc, cur) => (parseFloat(cur) + acc), 0)
			},
		},
		watch: {},
		mounted() {
			this.getNewOrderData() // 获取订单结算信息
			this.addressList() // 获取地址列表    
		},
		methods: {
			// 获取结算订单信息
			getNewOrderData() {
				let params = {
					token: localStorage.getItem("token"),
					data: {
						iSourceDetail: 1,
					}
				}
				this.$api.good.getNewOrder(params).then((res) => {
					if (res.code == 200) {
						this.appointTime = res.data.oCustomSetting.appointTime.split(';') || '00:00-23:59'
						console.log('获取购物车信息', JSON.parse(JSON.stringify(res.data)))
						this.orderList = res.data.oOrderDetails
						this.oMemeber = res.data.oMemeber, // 获取买家信息
							this.odeliveryType = res.data.odeliveryType
						for (let o in res.data.orderDetailData) {
							this.$set(res.data.orderDetailData[o], "cClientMemo", '')
						}
						console.log('1111', res.data)
						if (res.data.oCustomSetting.isMerchantDistribution == 1) {
							for (let o in res.data.orderDetailData) {
								console.log('222222', res.data.orderDetailData[o])
								this.$set(res.data.orderDetailData[o], "cClientMemo", '')
								this.$set(res.data.orderDetailData[o], "number", 0)
								this.$set(res.data.orderDetailData[o], "storeNumber", '')
								this.$set(res.data.orderDetailData[o], "storeName", '')
								this.$set(res.data.orderDetailData[o], "dAppointDate", this.getDates('start'))
								this.$set(res.data.orderDetailData[o], "UndAppointDate", this.getDates('end', res
									.data.orderDetailData[o].shopCustomSetting.iAppointLimitDays ? res.data
									.orderDetailData[o].shopCustomSetting.iAppointLimitDays : ''))
								this.$set(res.data.orderDetailData[o], "pickerOptions", this.getOptions(res
									.data.orderDetailData[o].shopCustomSetting.iAppointLimitDays ? res.data
									.orderDetailData[o].shopCustomSetting.iAppointLimitDays : ''))
								this.$set(res.data.orderDetailData[o], "cAppointTime", '')
								this.$set(res.data.orderDetailData[o], "timeNumber", res.data.orderDetailData[o]
									.shopCustomSetting.appointTime ? res.data.orderDetailData[o]
									.shopCustomSetting.appointTime.split(';')[0] : '')
							}
						} else {
							console.log('333333', res.data)
							this.$set(res.data, "cClientMemo", '')
							this.$set(res.data, "number", 0)
							this.$set(res.data, "storeNumber", '')
							this.$set(res.data, "storeName", '')
							this.$set(res.data, "dAppointDate", this.getDates('start'))
							this.$set(res.data, "UndAppointDate", this.getDates('end', res.data.oCustomSetting
								.iAppointLimitDays ? res.data.oCustomSetting.iAppointLimitDays : ''))
							this.$set(res.data, "pickerOptions", this.getOptions(res.data.oCustomSetting
								.iAppointLimitDays ? res.data.oCustomSetting.iAppointLimitDays : ''))
							this.$set(res.data, "cAppointTime", '')
							this.$set(res.data, "timeNumber", res.data.oCustomSetting.appointTime.split(';')[0] ||
								'00:00-23:59')
							for (let s in res.data.orderDetailData) {
								res.data.orderDetailData[s].cDeliverType = res.data.cDeliverType
								res.data.orderDetailData[s].cDeliverName = res.data.cDeliverName
							}
						}

						this.detail = res.data
						this.DayData = res.data.oCustomSetting.iAppointLimitDays
						this.addressData.cReceiver = res.data.cReceiver
						this.addressData.cMobile = res.data.cReceiveMobile
						this.addressData.cAddress = res.data.cReceiveAddress
						this.addressData.id = res.data.iMemeberAddress
						this.addressData.cRegion = res.data.cRegion

						res.data.oPayType.forEach(item => {
							this.array.push(item.name)
							this.cOrderPayType = item.name
						})

						let orderdata = []
						this.dlyFeeRuleId = []

						for (let i in this.detail.orderDetailData) {
							if (this.detail.orderDetailData[i].cDeliverType == 'EMS') {
								orderdata.push({
									"iShopId": i,
									"data": {
										giftPreferItemId: '',
										oMemeber: this.detail.oMemeber,
										orderDetail: this.detail.orderDetailData[i].orderDetail,
										price: this.detail.orderDetailData[i].fTotalMoney,
										dlyTypeId: this.detail.orderDetailData[i].dlyFeeRuleId
									}
								})

								this.detail.orderDetailData[i].cDeliverName = this.detail.orderDetailData[i]
									.shopCustomSetting.emsShowName || '快递物流'


							} else if (this.detail.orderDetailData[i].cDeliverType == 'PICKUP') {
								this.detail.orderDetailData[i].cDeliverName = this.detail.orderDetailData[i]
									.shopCustomSetting.pickupShowName || '门店自提'
							} else if (this.detail.orderDetailData[i].cDeliverType == 'STOREDELIVERY') {
								this.detail.orderDetailData[i].cDeliverName = this.detail.orderDetailData[i]
									.shopCustomSetting.deliveryShowName || '门店配送'
							}
						}
						// 获取配送方式
						this.EMSList = []
						let ems = []
						if (this.detail.oCustomSetting.isMerchantDistribution === 0) {
							// console.log('this.detail',JSON.parse(JSON.stringify(Object.values(this.detail.orderDetailData))))
							let OrderDetailDataValues = Object.values(this.detail.orderDetailData)
							OrderDetailDataValues.forEach(item => {
								// 获取门店列表
								let params = {
									area: this.oMemeber.cAreaSrcArea,
									city: this.oMemeber.cAreaSrcCity,
									province: this.oMemeber.cAreaProvince,
									iShopId: this.detail.oCustomSetting.iShopId
								}
								this.$api.good.OrderGetStoreList(params).then((res) => {
									if (res.code == 200) {
										if (res.data === undefined) {
											this.$set(this.detail, 'StoreList', [])
										} else {
											this.$set(this.detail, 'StoreList', res.data)
										}
									}
								})
								item.orderDetail.forEach(dd => {
									// console.log('dd==================0', dd)
									if (dd.oOrderDetailPropertys) {
										let ds = dd.oOrderDetailPropertys[0].promptMessage.split(
											"|")
										ds.forEach(itemd => {
											if (itemd == "快递物流") {
												ems.push({
													id: "EMS",
													name: item.oCustomSetting
														.emsShowName||"快递物流"
												})
											} else if (itemd == "门店自提") {
												ems.push({
													id: "PICKUP",
													name: item.oCustomSetting
														.pickupShowName||"门店自提"
												})
											} else if (itemd == "门店配送") {
												ems.push({
													id: "STOREDELIVERY",
													name: item.oCustomSetting
														.deliveryShowName||"门店配送"
												})
											}
										})
										// console.log('ds==============0', ds)
									}
								})
								if (ems.length > 0) {
									this.EMSList = ems
								} else {
									let tem = this.detail.oCustomSetting.dlyType.split("AND")
									tem.forEach(itemd => {
										if (itemd == "EMS") {
											this.EMSList.push({
												id: "EMS",
												name: this.detail.oCustomSetting.emsShowName||"快递物流"
											})
										} else if (itemd == "PICKUP") {
											this.EMSList.push({
												id: "PICKUP",
												name: this.detail.oCustomSetting.pickupShowName||"门店自提"
											})
										} else if (itemd == "STOREDELIVERY") {
											this.EMSList.push({
												id: "STOREDELIVERY",
												name: this.detail.oCustomSetting.deliveryShowName||"门店配送"
											})
										}
									})
								}
								// 数组去重
								for (let i = 0; i < this.EMSList.length - 1; i++) {
									for (let j = i + 1; j < this.EMSList.length; j++) {
										if (this.EMSList[i].id == this.EMSList[j].id) {
											this.EMSList.splice(j, 1);
											//因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
											j--;
										}
									}
								}
								this.$set(this.detail, 'EMSList', this.EMSList)
							})
						} else {
							// console.log('this.detail',JSON.parse(JSON.stringify(Object.values(this.detail.orderDetailData))))
							let OrderDetailDataValues = Object.values(this.detail.orderDetailData)
							OrderDetailDataValues.forEach(item => {
								let params = {
									area: this.oMemeber.cAreaSrcArea,
									city: this.oMemeber.cAreaSrcCity,
									province: this.oMemeber.cAreaProvince,
									iShopId: item.shopCustomSetting.iShopId
								}
								// 获取门店
								this.$api.good.OrderGetStoreList(params).then((res) => {
									if (res.code == 200) {
										if (res.data === undefined) {
											this.$set(item, 'StoreList', [])
										} else {
											this.$set(item, 'StoreList', res.data)
										}
									}
								})
								item.orderDetail.forEach(dd => {
									// console.log('ddasasas', dd.dlyType)
									this.$set(item, 'EMSListDlyType', item.cDeliverType)
									if (dd.oOrderDetailPropertys) {
										let ds = dd.oOrderDetailPropertys[0].promptMessage.split(
											"|")
										ds.forEach(itemd => {
											if (itemd == "快递物流") {
												ems.push({
													id: "EMS",
													name: item.shopCustomSetting
														.emsShowName||"快递物流"
												})
											} else if (itemd == "门店自提") {
												ems.push({
													id: "PICKUP",
													name: item.shopCustomSetting
														.pickupShowName||"门店自提"
												})
											} else if (itemd == "门店配送") {
												ems.push({
													id: "STOREDELIVERY",
													name: item.shopCustomSetting
														.deliveryShowName||"门店配送"
												})
											}
										})
									}
								})
								if (ems.length > 0) {
									this.EMSList = ems
								} else {
									let tem = item.shopCustomSetting.dlyType.split("AND")
									tem.forEach(itemd => {
										if (itemd == "EMS") {
											this.EMSList.push({
												id: "EMS",
												name: item.shopCustomSetting.emsShowName||"快递物流"
											})
										} else if (itemd == "PICKUP") {
											this.EMSList.push({
												id: "PICKUP",
												name: item.shopCustomSetting.pickupShowName||"门店自提"
											})
										} else if (itemd == "STOREDELIVERY") {
											this.EMSList.push({
												id: "STOREDELIVERY",
												name: item.shopCustomSetting
													.deliveryShowName||"门店配送"
											})
										}
									})
								}
								// 数组去重
								for (let i = 0; i < this.EMSList.length - 1; i++) {
									for (let j = i + 1; j < this.EMSList.length; j++) {
										if (this.EMSList[i].id == this.EMSList[j].id) {
											this.EMSList.splice(j, 1);
											//因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
											j--;
										}
									}
								}
								this.$set(item, 'EMSList', this.EMSList)
							})

						}

						// 获取邮费信息
						let postactivity = {
							token: localStorage.getItem("token"),
							data: {
								addressId: res.data.iMemeberAddress,
								price: res.data.fTotalMoney,
								orderDetailData: orderdata
							}
						}
						if (postactivity.data.orderDetailData.length > 0) {
							this.$api.good.getPostActivityList(postactivity).then(resq => {
								let allyun = 0
								console.log('获取邮费信息', resq)
								for (var s in resq.data) {
									if (s != -2) {
										console.log('获取邮费信息-2', res.data.iCorpId, resq.data[s])
										allyun += resq.data[s].postPrice[res.data.iCorpId]
									} else {
										console.log('获取邮费信息', res.data.iCorpId)
										allyun = resq.data[-2].postPrice[res.data.iCorpId]
									}

								}
								this.yun = allyun
								this.postList = resq.data
							})
						} else {
							this.yun = 0
							this.postList = []
						}
						console.log('this.detailss', JSON.parse(JSON.stringify(this.detail)))
						this.getAvailableCouponData(this.detail.orderDetailData) // 获取优惠券
					}
				})

			},
			// 提货时间处理
			getDates(type, iAppointLimitDays) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					// year = year - 60;
				} else if (type === 'end') {
					// day = day + (iAppointLimitDays - 1);
					console.log('iAppointLimitDays', iAppointLimitDays)
					this.pickerOptions = Object.assign({}, this.pickerOptions, {
						disabledDate(time) {
							let curDate = (new Date()).getTime(); //  获取当前时间点
							let seven = (Number(iAppointLimitDays)) * 24 * 60 * 60 *
								1000; // 设定7天日期  7天 * 24小时 * 60分钟 * 60秒 * 1000 = 7天的时间戳
							let sevenDays = curDate + seven; //  当前时间点后的七天所处的日期
							return time.getTime() < Date.now() - 8.64e7 || time.getTime() > sevenDays -
								8.64e7; // 8.64e7 表示一天，明天之前包括明天不可选，只可选七天
						}
					})
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				console.log('提货时间处理', type, `${year}-${month}-${day}`)
				return `${year}-${month}-${day}`;
			},
			//时间段处理
			getOptions(iAppointLimitDays){
				console.log('iAppointLimitDays', iAppointLimitDays)
				let options = {}
				options = Object.assign({}, options, {
					disabledDate(time) {
						let curDate = (new Date()).getTime(); //  获取当前时间点
						let seven = (Number(iAppointLimitDays)) * 24 * 60 * 60 *
							1000; // 设定7天日期  7天 * 24小时 * 60分钟 * 60秒 * 1000 = 7天的时间戳
						let sevenDays = curDate + seven; //  当前时间点后的七天所处的日期
						return time.getTime() < Date.now() - 8.64e7 || time.getTime() > sevenDays -
							8.64e7; // 8.64e7 表示一天，明天之前包括明天不可选，只可选七天
					}
				})
				return options
			},
			// 获取门店id
			StoreIdData(e, list, o) {
				console.log('获取门店id', e, list)
				let arr = list
				let ListIndex = 0
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].name === e) {
						ListIndex = i
					}
				}
				console.log('ListIndex', ListIndex)
				o.storeName = list[ListIndex].name
				o.storeId = list[ListIndex].id
				o.storeNumber = list[ListIndex].name
			},
			// 时间段选择
			TimeNumberData(e, list, o) {
				console.log('时间段选择', e, list)
				let arr = list
				let ListIndex = 0
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] === e) {
						ListIndex = i
					}
				}
				console.log('ListIndex', ListIndex)
				o.cAppointTime = list[ListIndex]
				o.timeNumber = list[ListIndex]
			},
			// 新增地址
			showModals(status) {
				this.$refs.addrssModals.showM("true", status);
			},
			//编辑地址
			editAddress(item) {
				this.edit_item = item;
				this.$refs.addrssModals.showM("true", "edit");
			},
			//新增地址
			saveAddress(e) {
				console.log(e);
				let params = {
					data: e,
					token: localStorage.getItem("token"),
				};
				this.$api.person.addAddress(params).then((res) => {
					if (res.code == 200) {
						this.$message.success(res.message);
						this.addressList();
					}
				});
			},
			// 设为默认地址
			setInitAddress(item) {
				this.adsList.forEach((items) => {
					this.$set(items, "bDefault", false);
				});
				this.$set(item, "bDefault", true);
				// 保存默认地址的修改
				this.addressData = item;
				console.log("保存默认地址的修改", item);
				this.SaveaddAddress(this.addressData)
			},
			// 设为默认地址
			SaveaddAddress(SaveaddAddress) {
				let params = {
					token: localStorage.getItem("token"),
					data: SaveaddAddress
				}
				this.$api.person.addAddress(params).then((res) => {
					if (res.code == 200) {
						this.$message.success(res.message);
					} else {
						this.$message.error(res.message);
					}
				})
			},
			// 去商品详情
			GoToShow(GoToShow) {
				console.log('去商品详情', GoToShow)
				this.$router.push({
					path: "/fruit/detail",

					query: {
						id: GoToShow.iProductId,
						iShopId: GoToShow.ShopShow === 'undefined' ? '' : GoToShow.ShopShow.id
					},
				});
			},
			//获取地址列表
			addressList() {
				let params = {
					token: localStorage.getItem("token"),
				};
				this.$api.person.addressList(params).then((res) => {
					if (res.code == 200) {
						this.adsList = res.data;
						res.data.forEach((ads) => {
							if (ads.bDefault) {
								this.addressData = ads;
							}
						});
						console.log("获取地址列表", res.data);
						// this.getPostActivityList();
					} else {
						this.$message.error(res.message);
					}
				});
			},

			// 切换活动方式,优惠券。积分、整单优惠
			handleClick(tab, event) {
				console.log('切换活动方式', tab, event)
			},
			// 优惠券中切换可用和不可用选项
			CouponsTabClick(CouponsTabClick) {
				this.CouponsIndex = CouponsTabClick
			},
			//是否开发票
			isCheckedKfp() {
				this.isChecked = !this.isChecked;
			},
			// 去付款
			goPayFor() {
				console.log('去付款', this.addressData)
				this.detail.cReceiver = this.addressData.cReceiver
				this.detail.cReceiveMobile = this.addressData.cMobile
				this.detail.cReceiveAddress = this.addressData.cAddress
				this.detail.iMemeberAddress = this.addressData.id
				this.detail.cRegion = this.addressData.cRegion
				this.detail.couponFileId = this.coupon.couponId
				this.detail.couponId = this.coupon.couponCoding
				this.detail.couponMoney = this.coupon.maxReduceAmount
				this.detail.cPayType = this.cPayType || this.detail.cOrderPayType
				if (this.detail.oCustomSetting.isMerchantDistribution == 0 && this.detail.cDeliverType != 'EMS') {
					if (this.detail.storeId == 0) {
						this.$message.error('请先选择门店！')
						this.doubleClick = true
						this.disa = false
						return false
					}
				}
				if (this.detail.oCustomSetting.isMerchantDistribution == 1) {
					for (let item in this.detail.orderDetailData) {
						console.log('asasas', item, this.detail.orderDetailData[item])
						if (this.detail.orderDetailData[item].cDeliverType != "EMS" && this.detail.orderDetailData[item]
							.storeId == 0) {
							this.$message.error(
								`请先选择${this.detail.orderDetailData[item].shopCustomSetting.cShopTag === undefined?'平台自营':this.detail.orderDetailData[item].shopCustomSetting.cShopTag}门店！`
							)
							this.doubleClick = true
							this.disa = false
							return false
						}

					}
				}
				let PUSHData = {
					token: localStorage.getItem("token") || null,
					data: this.detail
				}
				console.log('t', PUSHData)
				this.$api.good.submitOrder(PUSHData).then((res) => {
					if (res.code == 200) {
						console.log('去付款成功', res.data)
						this.payorder(res.data.cOrderNo);
					} else {
						this.$message.error(res.message);
					}
				})
			},
			//跳转支付
			payorder(cOrderNo) {
				console.log('sumAmount', this.sumAmount)
				let paydata = {
					cOrderNo: cOrderNo, // 订单号
					paytype: 1, // 支付类型(1：表示线上支付, 2: 线下支付)
					remark: "营家支付", // 标记
					paytypecode: "construct", // 支付方式（chanpay：畅捷支付，alipay：支付宝支付,weixin:微信支付， construct：营家支付）
					payBackUrl: "/client/Pay/payNotify?paytypecode=construct",
				};
				let par = {
					token: localStorage.getItem("token"),
					data: paydata,
				};
				this.$api.good.buildPayment(par).then((res) => {
					if (res.code == 200) {
						console.log('跳转支付', res.data)
						let type = "CASHIER_PAY_PC";
						// let amount = 0
						
						let shop = []
						if(this.detail.oCustomSetting.isMerchantDistribution == 1){
							for (let item in this.detail.orderDetailData) {
								let data = {}
								if(this.detail.fDepositMoney){
									data = {
										id: item,
										price: this.detail.orderDetailData[item].fTotalMoney,
										// postPrice: this.postList[item].postPrice[this.detail.iCorpId],
										postPrice: this.postList[item].postPrice[this.detail.iCorpId],
										// amount: (this.detail.orderDetailData[item].fTotalMoney * 1000 + this.postList[
										// 	item].postPrice[this.detail.iCorpId] * 1000) / 1000
										amount: this.detail.fDepositMoney
									}
								}else{
									data = {
										id: item,
										price: this.detail.orderDetailData[item].fTotalMoney,
										// postPrice: this.postList[item].postPrice[this.detail.iCorpId],
										postPrice: this.postList[item].postPrice[this.detail.iCorpId],
										// amount: (this.detail.orderDetailData[item].fTotalMoney * 1000 + this.postList[
										// 	item].postPrice[this.detail.iCorpId] * 1000) / 1000
										amount: (this.detail.orderDetailData[item].fTotalMoney*1000+this.postList[item].postPrice[this.detail.iCorpId]*1000)/1000
									}
								}
								
								shop.push(data)
							}
						}else{
							let price = 0
							let am = 0
							if(this.detail.fDepositMoney){
								price = this.detail.fDepositMoney
								am = price
							}else{
								price = this.detail.fTotalMoney
								am = (this.detail.fTotalMoney*1000+this.yun*1000)/1000
							}
							let data = {
								id:this.detail.oCustomSetting.iShopId,
								price:price,
								postPrice:this.yun,
								amount:am
							}
							shop.push(data)
						}
						
						let paramsdata = {
							token: localStorage.getItem("token"),
							uid: JSON.parse(localStorage.getItem("userInfo")).mid,
							pay_no: res.data.cPayNo,
							order_no: cOrderNo,
							// page_url: `http://youyou.tangmu.xin/pc/#/payType?cOrderNo=${cOrderNo}&type=1`, // 测试
							page_url: `https://mall.inja.com/#/payType?cOrderNo=${cOrderNo}&type=1`,  // 正式
							amount:res.data.iAmount,
							type: type,
							shop:shop
						};
						console.log(paramsdata)
						this.$api.good.pay(paramsdata).then((res) => {
							if (res.code == 1) {
								console.log('跳转支付PAY', res)
								let ur = this.urlEncode(res.data);
								let xx = ur.substr(0, 1);
								let yy = ur.replace(xx, "?");
								console.log('跳转支付PAYasa', yy)
								window.location.href = "https://ipay.inja.com/gateway/cashier/acquiring?dd=1" + ur; //正式环境
								// window.location.href =
									// "http://ipay.ysyec.com/gateway/cashier/acquiring?dd=1" + ur; //测试环境
							}
						});
					}
				});
			},
			//转码
			urlEncode(param, key, encode) {
				if (param == null) return "";
				var paramStr = "";
				var t = typeof param;
				if (t == "string" || t == "number" || t == "boolean") {
					paramStr +=
						"&" +
						key +
						"=" +
						(encode == null || encode ? encodeURIComponent(param) : param);
				} else {
					for (var i in param) {
						var k =
							key == null ?
							i :
							key + (param instanceof Array ? "[" + i + "]" : "." + i);
						paramStr += this.urlEncode(param[i], k, encode);
					}
				}
				return paramStr;
			},
			//关闭删除商品 弹窗
			result(e) {
				if (e) {
					let params = {
						token: localStorage.getItem("token"),
						data: {
							items: this.currentItem,
						},
					};

					this.$api.good.delCarts(params).then((res) => {
						if (res.code == 200) {
							this.$message.success(res.message);
							this.getNewOrder();
							this.$forceUpdate()
						} else {
							this.$message.error(res.message);
						}
					});
				}
			},

			//获取优惠券
			getAvailableCouponData(orderDetailData) {
				console.log('获取优惠券', orderDetailData)
				let orderdata = []
				for (let item in orderDetailData) {
					orderdata.push({
						iShopId: item,
						data: {
							payableAmounts: 15,
							pageIndex: 1,
							pageSize: 1000,
							iFilterType: 1,
							orderDetail: orderDetailData[item].orderDetail,
						}
					})
				}
				let postactivity = {
					token: localStorage.getItem("token"),
					data: {
						param: {
							postActivityId: '',
							promotionAmount: 0,
							promotionAmountId: 0,
							orderDetailData: orderdata
						}
					}
				}
				this.$api.good.getAvailableCoupon(postactivity).then((res) => {
					if (res.code == 200) {
						console.log('获取优惠券', res.data);
						this.availableCount = res.data[-2].availableCount // 可用优惠券数量
						this.availableMemberCoupon = res.data[-2].availableMemberCoupon // 可用优惠券列表
						this.unavailableCount = res.data[-2].unavailableCount // 不可用优惠券数量
						this.unavailableMemberCoupon = res.data[-2].unavailableMemberCoupon //  不可用优惠券列表
					} else {
						this.$message.error(res.message);
					}
				});
			},
			//选中优惠券
			userCoupon(item) {
				// console.log(item)
				this.coupon = item;
				this.availableMemberCoupon.forEach((items,index) => {
					if(items.couponCoding == item.couponCoding){
						console.log(items)
						console.log(index)
						this.$set(item, "isSelected", true);
					}else{
						console.log(items)
						this.$set(items, "isSelected", false);
					}
					
				});
				
			},
			//取消优惠券
			userCoupons(item) {
				this.coupon = {
					maxReduceAmount: 0,
					couponCoding: "",
					couponId: "",
				};
				// this.availableMemberCoupon.forEach((items) => {
				// 	if(items.id != item.id){
				// 		this.$set(item, "isSelected", false);
				// 	}
				// });
				this.$set(item, "isSelected", false);
			},
			// 切换配送方式
			checkoDeliver(emslist, o, ite) {
				console.log('切换配送方式', emslist, o, ite)
				o.EMSListDlyType = ite.id
				o.cDeliverType = ite.id
				o.cDeliverName = ite.name
				let res = {
					data: this.detail
				}
				let orderdata = []
				this.dlyFeeRuleId = []
				if(this.detail.oCustomSetting.isMerchantDistribution == 0&&o.EMSListDlyType!="EMS"){
					this.yun = 0
					this.postList = []
					return
				}
				for (let i in this.detail.orderDetailData) {
					if (this.detail.orderDetailData[i].cDeliverType == 'EMS') {
						orderdata.push({
							iShopId: i,
							data: {
								giftPreferItemId: '',
								oMemeber: this.detail.oMemeber,
								orderDetail: this.detail.orderDetailData[i].orderDetail,
								price: this.detail.orderDetailData[i].fTotalMoney,
								dlyTypeId: this.detail.orderDetailData[i].dlyFeeRuleId
							}
						})
					}
				}
				// 获取邮费信息
				let postactivity = {
					token: localStorage.getItem("token"),
					data: {
						addressId: res.data.iMemeberAddress,
						price: res.data.fTotalMoney,
						orderDetailData: orderdata
					}
				}
				if (postactivity.data.orderDetailData.length > 0) {
					this.$api.good.getPostActivityList(postactivity).then(resq => {
						let allyun = 0
						console.log('获取邮费信息', resq)
						for (var s in resq.data) {
							if (s != -2) {
								console.log('获取邮费信息-2', res.data.iCorpId, resq.data[s])
								allyun += resq.data[s].postPrice[res.data.iCorpId]
							} else {
								console.log('获取邮费信息', res.data.iCorpId)
								allyun = resq.data[-2].postPrice[res.data.iCorpId]
							}

						}
						this.yun = allyun
						this.postList = resq.data
					})
				} else {
					this.yun = 0
					this.postList = []
				}
			},
		}
	}
</script>
<style>
	.el-step__head.is-success {
		/* color: #EF406F!important; */
		border-color: #ef406f;
	}

	/* .el-step__icon{
		background: #EF406F;
		color: #fff;
	} */
	.el-step__title.is-success {
		color: #ef406f !important;
	}

	.el-tabs__item:hover {
		color: #ef406f;
		cursor: pointer;
	}

	.el-tabs__item.is-active {
		color: #ef406f !important;
	}

	.el-tabs__active-bar {
		background-color: #ef406f !important;
	}

	.el-tabs__content {
		margin-bottom: 1rem;
	}
</style>

<style scoped lang="scss">
	.carBox {
		margin-top: 3.75rem;
		// padding: 0 16.44rem;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		flex-direction: column;

		.btns {
			display: flex;
			flex-direction: row;
			align-items: flex-end;

			.toggleAd {
				padding: 0.5rem 1.2rem;
				font-size: 0.88rem;
				color: #000;
				border: 0.06rem solid #000;
				background-color: #fff;
				margin-right: 1.5rem;
				cursor: pointer;

				&:hover {
					opacity: 0.8;
				}
			}

			.addAd {
				padding: 0.5rem 1.2rem;
				font-size: 0.88rem;
				color: #fff;
				border: 0.06rem solid #000;
				background-color: #000;
				cursor: pointer;

				&:hover {
					opacity: 0.8;
				}
			}
		}

		.coupBox {
			display: flex;
			flex-direction: column;
			width: 83.81rem;
			font-size: 0.88rem;
			padding: 1.75rem;
			background: #fff;
			margin-bottom: 1rem;

			.cptop {
				height: 3.5rem;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.lefttop {
					font-size: 1rem;
					color: #050504;

					img {
						width: 3.13rem;
						height: 1.69rem;
						vertical-align: middle;
						margin-right: 1rem;
					}
				}

				.righttop {
					font-size: 0.88rem;
					color: #666;
				}
			}

			.cpbody {
				display: flex;
				flex-direction: row;

				.coups {
					width: 10.06rem;
					// height: 3.63rem;
					padding: 1.5rem;

					display: flex;
					flex-direction: column;
					align-items: center;
					color: #ef406f;
					position: relative;

					.notes {
						font-size: 0.75rem;
						padding-bottom: 0.5rem;
						width: 100%;
						text-align: left;
					}

					.times {
						font-size: 0.63rem;
						width: 100%;
						text-align: left;
					}

					.get {
						font-size: 1rem;
						color: #fff;
						// background-color: #EF406F;
						border-radius: 50%;
						width: 2.5rem;
						height: 2.5rem;
						line-height: 2.5rem;
						text-align: center;
						right: 0.5rem;
						top: 0.5rem;
						position: absolute;
						cursor: pointer;
					}
				}
			}
		}

		.addressInfo {
			display: flex;
			flex-direction: column;
			width: 82.31rem;
			font-size: 0.88rem;
			padding: 2.5rem;
			background: #fff;
			margin-bottom: 1rem;

			.initAddress {
				font-size: 0.88rem;
				color: #040000;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				img {
					width: 1.56rem;
					height: 1.25rem;
					vertical-align: middle;
				}

				span {
					padding: 0 1rem;

					&.edit {
						padding: 0.2rem 0.5rem;
						border: 0.06rem solid #7b7b7b;
					}
				}
			}

			.ads {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 1rem 0 0;
				height: 10.5rem;
				overflow: hidden;
				overflow-y: auto;

				.addinfos {
					width: 100%;

					div.leftAdd {
						// width: 100%;
						// line-height: 3;
						margin-bottom: 0.4rem;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						cursor: pointer;

						&:hover {
							background: #eac1cc;

							.rightAd {
								display: flex;
							}
						}

						.leftAd {
							display: flex;
							flex-direction: row;
							align-items: center;

							>span {
								&:first-child {
									color: #666;
									background: #fff;
									border: 0.06rem solid #666;
									padding: 0.5rem 0rem;
									width: 7rem;
									height: 1.2rem;

									text-align: center;

									font-size: 0.88rem;
									margin-right: 2rem;
									cursor: pointer;

									&.isSelected {
										width: 7rem;
										height: 1.2rem;
										line-height: 1.2rem;
										color: #fff;
										background: #ef406f;
										border: 0.06rem solid #ef406f;
										padding: 0.5rem 0rem;
										font-size: 0.88rem;
										margin-right: 2rem;
									}
								}

								// padding-right: 1rem;
							}
						}

						.isSelected {
							color: #fff;
							background: #ef406f;
							width: 100%;
						}

						.rightAd {
							display: none;
							flex-direction: row;

							span {
								padding-right: 1rem;

								&:hover {
									text-decoration: underline;
								}
							}
						}
					}
				}
			}
		}

		.pick-box {
			display: flex;
			flex-direction: column;
			width: 87.31rem;
			margin: 0 auto 1rem auto;
			.title {
				font-weight: bold;
				font-size: 1rem;
				border-bottom: 0.1rem solid #333;
				padding: 1rem;
			}
		}

		.steps {
			margin: 3.19rem auto;
			width: 48.31rem;
		}

		.tableTitle {
			height: 3.13rem;
			line-height: 3.13rem;
			background: #000;
			color: #fff;
			font-size: 1rem;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			width: 87.31rem;
			margin: 0 auto 1rem auto;
			text-align: center;
		}

		.carList {
			// max-height: 56.19rem;
			width: 87.31rem;
			background: #fff;
			font-size: 1rem;
			margin-bottom: 1rem;
			overflow-y: auto;

			.toper {
				padding: 1.13rem 0.94rem;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 0.06rem solid rgba(231, 231, 231, 1);
				color: #5d5d5d;

				.btns {
					padding: 0.81rem 2.56rem;
					color: #fff;
					background: #f0406f;
					margin-right: 2rem;
				}

				.btns2 {
					margin: 0 4rem;
					padding: 0.31rem 0.5rem;
					color: #f0406f;
					border: 0.06rem solid #f0406f;
				}
			}
		}

		.list {
			.top-box {
				display: flex;
				justify-content: space-between;
				border-top: 6px solid #e7e7e7;

				.shop_title {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 1.2rem 2.06rem;
					font-size: 1rem;
					font-weight: bold;
				}

				.shop_time {
					display: flex;
					padding: 1.2rem 2.06rem;
					align-items: center;
					font-size: 0.6rem;
					font-weight: bold;
					color: #666;
				}
			}

			.list_item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 1.2rem 2rem;
				border-bottom: 0.06rem solid rgba(231, 231, 231, 1);

				.radio {

					// margin-right: 2.13rem;
					img {
						width: 0.8rem;
						height: 0.8rem;
					}
				}

				.goodImg {
					width: 12rem;
					height: 7rem;
					text-align: center;
					cursor: pointer; //鼠标变小手
					// margin-right: 3.88rem;

					img {
						object-fit: contain;
						width: 7rem;
						height: 7rem;
					}
				}

				.titles {
					// width: 14rem;
					width: 24rem;
					line-height: 1.5rem;
					font-size: 0.88rem;
					flex-wrap: wrap;
					text-align: center;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.skus {
					font-size: 0.88rem;
					// margin-right: 9.94rem;
					width: 10rem;
					text-align: center;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.nums {
					width: 14rem;
					font-size: 0.88rem;
					text-align: center;
					// margin-right: 8.25rem;

					.add {
						cursor: pointer;
					}
				}

				.price {
					// margin-right: 3.44rem;
					font-size: 1.5rem;
					color: #f0406f;
					width: 10rem;
					white-space: nowrap;
					text-align: center;

					span {
						font-size: 1.25rem;
					}
				}

				.ops {
					font-size: 0.88rem;
					display: flex;
					flex-direction: column;
					line-height: 1.25rem;
					width: 12rem;
					text-align: center;

					>div {
						cursor: pointer;

						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}

		.opGroup {
			background-color: #fff;
			padding: 1.4rem 1.75rem;
			width: 83.81rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.leftop {
				font-size: 0.88rem;
				color: #666;

				img {
					width: 0.81rem;
					height: 0.81rem;
					margin-right: 2.81rem;
					cursor: pointer;
				}

				span {
					margin-right: 2.81rem;
					cursor: pointer;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			.rightop {
				display: flex;
				flex-direction: row;
				align-items: center;

				.infos {
					line-height: 1.84rem;
					color: #666;
					font-size: 0.88rem;
				}

				.priceop {
					font-size: 0.88rem;
					color: #666;
					line-height: 1.84rem;
					padding: 0 6.81rem 0 4.69rem;

					span {
						color: #f0406f;
						font-size: 1.63rem;
					}

					.tiaoj {
						font-size: 0.88rem;
					}
				}

				.payfor {
					width: 11.5rem;
					height: 3.31rem;
					background: #f0406f;
					color: #fff;
					font-size: 1.13rem;
					text-align: center;
					line-height: 3.31rem;
					cursor: pointer;

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}

		.opGroups {
			background-color: #fff;
			padding: 1.4rem 1.75rem;
			width: 83.81rem;
			// height: 30.31rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.topers {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-direction: column;
				width: 100%;
				// padding-bottom: 8.56rem;
				border-bottom: 0.06rem solid rgba(235, 235, 235, 1);

				.tab-box {
					.tip {
						font-size: .8rem;
						line-height: 1rem;
						margin-bottom: 1rem;

						.buttontox {
							display: flex;
							justify-content: flex-end;
							width: 100%;

							.tipbutton {
								color: #000 !important;
							}
						}
					}

					.coupons_tab_box {
						display: flex;
						height: 2rem;
						align-items: center;
						font-size: .8rem;
						line-height: 1rem;
						margin-bottom: 1rem;

						.item {
							margin-right: 1rem;
							cursor: pointer;
						}

						.item:hover {
							color: #f0406f;
						}

						.coupons_active {
							color: #f0406f;
							border-bottom: 1px solid #f0406f;
							padding: .4rem .4rem;
						}
					}

					.tab_content_box {
						display: flex;
						width: 100%;
						flex-direction: column;
						font-size: .8rem !important;

						.el-checkbox {
							display: flex !important;
							align-items: center !important;
						}

						.checkbox_box {
							display: flex;
							height: 2rem;
							align-items: center;

							.item {
								margin: 0 2rem 0 0;
							}

							.nuset {
								color: #f0406f;
								cursor: pointer; //鼠标变小手
							}
						}
					}
				}

				.pict_box {
					display: flex;
					justify-content: space-between;
					width: 100%;
				}
			}

			.btnsGroup {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 100%;
				text-align: right;
				padding: 1.44rem 0 0;

				.allprice {
					font-size: 1rem;
					color: #666;
					padding-bottom: 2.75rem;

					.pr {
						font-size: 1.69rem;
						color: #f0406f;
					}
				}

				.payBox {
					width: 100%;
					text-align: right;

					.payfors {
						float: right;
						width: 16.25rem;
						height: 3.25rem;
						color: #fff;
						background: rgba(240, 64, 111, 1);
						text-align: center;
						line-height: 3.25rem;
						font-size: 1.25rem;
						cursor: pointer;
					}
				}
			}

			.leftops {
				font-size: 0.88rem;
				color: #666;
				line-height: 1.84rem;

				>div {
					padding-bottom: 1.63rem;
				}

				img {
					width: 0.81rem;
					height: 0.81rem;
					margin-right: 0.5rem;
				}

				span {
					margin-right: 2.56rem;
					cursor: pointer;
					// &:hover {
					// 	text-decoration: underline;
					// }
				}

				input {
					width: 23.38rem;
					height: 1.44rem;
					background: rgba(255, 255, 255, 1);
					border: 0.06px solid rgba(201, 201, 201, 1);
					outline: none;
					color: #999;
					font-size: 0.88rem;
					padding-left: 0.63rem;
				}

				.tags {
					display: flex;
					flex-direction: row;
					align-items: center;

					label {
						margin-right: 4.36rem;
						color: #666;
					}

					span {
						border: 0.06rem solid #7b7b7b;
						border-radius: 0.31rem;
						width: 4.75rem;
						height: 1.44rem;
						text-align: center;
						line-height: 1.44rem;
						color: #999;

						&.active {
							background-color: #f0406f;
							border: 0.06rem solid #f0406f;
							color: #fff;
						}
					}
				}

				.isKFP {
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.Atitle {
					display: flex;
					flex-direction: row;
					align-items: center;

					.Atitles {
						font-size: 1rem;
						color: #666;
						margin-right: 0.5rem;
					}

					.tooltip {
						cursor: pointer;
					}

					.icon {
						color: #fff;
						font-size: 1rem;
						line-height: 1.31rem;
						text-align: center;
						width: 1.31rem;
						height: 1.31rem;
						background: rgba(37, 37, 37, 1);
						border-radius: 50%;
					}
				}
			}

			.rightops {
				width: 15rem;
				display: flex;
				flex-direction: column;
				line-height: 1.84rem;

				>div {
					padding-bottom: 1.94rem;
				}

				.prices {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					color: #666;
					font-size: 1rem;
				}
				.moeny{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					color: #f0406f;
					font-size: 1.5rem;
				}
			}
		}
	}

	.el-step__head.is-success {
		color: #f0406f !important;
		border-color: #f0406f !important;
	}

	.phoneBox {
		// width: 36rem;
		padding: 0 0 30rem;
		height: auto;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		justify-content: center;

		.allTitle {
			color: #494949;
			font-size: 1.13rem;
			padding: 2.88rem 2.88rem 0;
		}

		.steps {
			margin: 6.3rem 0;
		}

		.tips {
			text-align: center;
			font-size: 1.13rem;
			color: #666;
		}

		.codeInput {
			width: 27.75rem;
			height: 2.8rem;
			font-size: 0.88rem;
			display: flex;
			flex-direction: row;
			margin: 2rem auto 3.81rem;

			input {
				width: 19.75rem;
				outline: none;
				height: 2.8rem;
				background: rgba(255, 255, 255, 1);
				border: 0.06px solid rgba(209, 209, 209, 1);
				text-indent: 0.94rem;
			}

			div {
				width: 8rem;
				cursor: pointer;
				height: 2.8rem;
				user-select: none;
				color: #fff;
				text-align: center;
				line-height: 2.8rem;
				background: rgba(180, 160, 120, 1);
			}
		}

		.codeInputs {
			width: 27.75rem;
			height: 2.8rem;
			font-size: 0.88rem;
			display: flex;
			flex-direction: row;
			margin: 0.5rem auto 0.5rem;


			input {
				width: 27.75rem;
				outline: none;
				height: 2.8rem;
				background: rgba(255, 255, 255, 1);
				border: 0.06px solid rgba(209, 209, 209, 1);
				text-indent: 0.94rem;
			}
		}

		.nextBtn {
			width: 24.44rem;
			height: 2.81rem;
			margin: 0 auto;
			background: rgba(0, 0, 0, 1);
			color: #fff;
			font-size: 1.13rem;
			text-align: center;
			line-height: 2.81rem;
			cursor: pointer;
			user-select: none;
		}
	}

	.new_big_box {
		padding: 1.2rem 2.06rem;
		width: 40rem;

		span {
			border: 0.06rem solid #7b7b7b;
			border-radius: 0.31rem;
			width: 4.75rem;
			height: 1.44rem;
			text-align: center;
			line-height: 1.44rem;
			color: #999;
			margin-right: 2rem;
			cursor: pointer;
			padding: .3rem;

			&.active {
				background-color: #f0406f;
				border: 0.06rem solid #f0406f;
				color: #fff;
				cursor: pointer;
				padding: .3rem;
			}
		}
	}
</style>
